import React from 'react'
import { Progress, ProgressProps } from './Progress';
import { ComponentStory, ComponentMeta } from "@storybook/react";

export default {
    title: 'Wavexk/Progress',
    component: Progress,
    argTypes: {
        percent: {
            type: 'number',
            description: 'the percent of this Progress',
        },
        size: {
            type: 'string',
            description: 'the size of this button',
            table: {
                type: {
                    summary: 'string',
                },
                defaultValue: {
                    summary: 'df'
                },
            },
            control: {
                type: 'inline-radio',
                options: ['sm', 'df', 'lg']
            },
        },
        showText: {
            type: "boolean",
            description: "Whether the Progress can be show the percent",
            table: {
                defaultValue: {
                    summary: false
                },
            },
        },
        theme: {
            description: "primary",
            type: 'string',
            table: {
                type: {
                    summary: 'string',
                },
                defaultValue: {
                    summary: 'primary'
                },
            },
        }
    },
} as ComponentMeta<typeof Progress>;


export const Default: ComponentStory<typeof Progress>= (props) => <Progress percent={50} theme='primary'/>;
Default.parameters = {
    docs: {
        description: {
            story: "this is a default Progress"
        }
    }
}

export const WithText: ComponentStory<typeof Progress> = (props) => <Progress percent={50} theme='primary' showText={true} />;
WithText.parameters = {
    docs: {
        description: {
            story: "this is a WithText Progress"
        }
    }
}

export const Danger: ComponentStory<typeof Progress> = (props) => <Progress percent={50} theme='danger' />;
Danger.parameters = {
    docs: {
        description: {
            story: "this is a danger Progress"
        }
    }
}

export const Height: ComponentStory<typeof Progress> = (props) => <Progress percent={50} theme='primary' strokeHeight={25} />;
Height.parameters = {
    docs: {
        description: {
            story: "this is a Height Progress"
        }
    }
}
